<template>
  <div class="stuContainer">
    <div class="searchList">
      <el-button type="primary" icon="el-icon-plus" @click="addManage" size="small">新增</el-button>
      <div class="searchBox">
        <div class="search">
          <span>学生ID</span>
          <el-input v-model="studentId" size="medium" class="searchInput"></el-input>
        </div>
        <div class="search">
          <span>学院</span>
          <el-input v-model="department" size="medium" class="searchInput"></el-input>
        </div>
        <div class="search">
          <span>专业</span>
          <el-input v-model="major" size="medium" class="searchInput"></el-input>
        </div>
        <div class="search">
          <span>年级</span>
          <el-input v-model="grade" size="medium" class="searchInput"></el-input>
        </div>
        <div class="search">
          <span>班级</span>
          <el-input v-model="classNum" size="medium" class="searchInput"></el-input>
        </div>
        <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 20px;" @click="getList('search')">搜索</el-button>
      </div>
    </div>
    <BasicTablePagination @handler="tableHandler" :column="column" :data="data" :pagination="pagination" @sizeChange="sizeChange" @numChange="numChange"></BasicTablePagination>
    <editInfoDialog @reloadData="getList('reload')" ref="editInfoDialogRef"></editInfoDialog>
  </div>
</template>

<script>
import BasicTablePagination from '@/components/BasicTablePagination/BasicTablePagination'
import editInfoDialog from './components/editInfoDialog/index.vue'
import { getStudentList, deleteStudent } from '@/api/userInfoManage'
import { tableColumn } from '@/constants/stuManageTable'

export default {
  name: 'StudentInfoManage',
  components: {
    BasicTablePagination,
    editInfoDialog
  },
  data() {
    return {
      data: [

      ],
      column: tableColumn,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      studentId: '',
      department: '',
      major: '',
      grade: '',
      classNum: ''
    }
  },
  methods: {
    // 表格处理方法
    tableHandler(val) {
      let { type, data } = val
      console.log(type, data)
      switch(type) {
        case 'edit':
          this.editInfo(data)
          break
        case 'delete':
          this.deleteData(data)
          break
        default:
          break
      }
    },
    // 获得所有学生列表
    async getList(val) {
      let params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        department: this.department,
        major: this.major,
        grade: this.grade,
        classNum: this.classNum,
        studentId: this.studentId
      }
      if (val == 'search') {
        params.pageNum = 1
        params.pageSize = 10
      }
      const res = await getStudentList(params)
      if (res.success == true) {
        this.data = res.data
        this.data.forEach(item => {
          if (item.gender == 0) {
            item.sex = '女'
          } else if (item.gender == 1) {
            item.sex = '男'
          }
        })
        this.pagination.total = res.total
      } else {
        this.$message.error(res.errorMsg)
      }
    },
    // 分页大小改变
    sizeChange(val) {
      this.pagination.pageSize = val
      this.getList('reload')
    },
    // 分页改变
    numChange(val) {
      this.pagination.pageNum = val
      this.getList('reload')
    },
    // 删除学生信息
    async deleteData(val) {
      this.$confirm('是否删除该学生信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteStudent(val.id)
        if (res.success == true) {
          await this.getList('reload')
          this.$message.success('删除成功！')
        } else {
          this.$message.error(res.errorMsg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改学生信息
    editInfo(val) {
      this.$refs.editInfoDialogRef.openDialog(val)
    },
    // 新增
    addManage() {
      this.$refs.editInfoDialogRef.openDialog({})
    }
  },
  created() {
    this.getList('load')
  }
}
</script>

<style scoped lang="sass">
.stuContainer
  padding: 20px
  .searchList
    display: flex
    align-items: center
    justify-content: space-between
    margin-bottom: 20px
    .searchBox
      display: flex
      align-items: center
      justify-content: flex-end
      .search
        display: inline-flex
        align-items: center
        justify-content: center
        margin-right: 10px
        span
          width: 50px
        .searchInput
          width: 150px
</style>
